<template>
  <div>
    <!-- 账号信息维护 -->
    <div class="content">
      <br />
      <!-- 用户名 -->
      <div class="info">
        <div class="df">
          <div>用户名：{{ aa.account }}</div>
          <div>
            <el-button type="text" @click="dialogVisible = true">
              重命名
            </el-button>
          </div>
        </div>

        <div class="df m50">
          <div>手机号：{{ aa.mobile }}</div>
          <div>
            <el-button type="text" @click="dialogVisible2 = true"
              >去更换</el-button
            >
          </div>
        </div>

        <div class="df">
          <div>邮箱：{{ aa.email }}</div>
          <div>
            <el-button type="text" @click="dialogVisible1 = true">
              去更换
            </el-button>
          </div>
        </div>
      </div>

      <!-- 用户重命名 -->
      <div class="dialog">
        <el-dialog
          v-model="dialogVisible"
          :width="400"
          :height="640"
          center
          align-center
          style="border-radius: 7px"
        >
          <template #header>
            <div class="tac mb20" style="font-size: 20px; font-weight: bold">
              安全验证
            </div>
          </template>

          <!-- <div class="tac">为了保证你的账号安全，请验证身份</div> -->
          <!-- <div class="tac" style="margin: 13px 0">
            验证成功之后进行下一步操作
          </div> -->
          <div
            class="tac"
            style="font-size: 20px; font-weight: bold; margin-bottom: 20px"
          >
            {{ aa.account }}
          </div>

          <!-- 表单 -->
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            style="margin-left: 30px"
          >
            <el-form-item class="poDing" prop="username">
              <el-input
                v-model="ruleForm.username"
                class="input_shuru"
                placeholder="请输入用户名"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="User"
              />
              <!-- <div class="inp_yzm" @click="countDown()">
                {{ content }}
              </div> -->
            </el-form-item>

            <el-form-item>
              <el-button
                type=""
                @click="submitForm()"
                style="
                  width: 155px;
                  height: 40px;
                  background: #9cdce4;
                  color: #fff;
                  margin-bottom: 20px;
                "
              >
                下一步
              </el-button>
              <el-button
                plain
                @click="resetForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  margin-left: 40px;
                  margin-bottom: 20px;
                "
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!-- 绑定邮箱 -->
      <div class="dialog">
        <el-dialog
          v-model="dialogVisible1"
          :width="400"
          :height="640"
          center
          align-center
          style="border-radius: 7px"
        >
          <template #header>
            <div class="tac mb20" style="font-size: 20px; font-weight: bold">
              绑定邮箱
            </div>
          </template>

          <!-- 表单 -->
          <el-form
            ref="ruleFormRef1"
            :model="ruleForm"
            :size="formSize"
            status-icon
            style="margin-left: 30px"
            :rules="rules"
          >
            <el-form-item class="poDing" prop="email">
              <el-input
                v-model="ruleForm.email"
                class="input_shuru"
                placeholder="请输入邮箱地址"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="Message"
              >
              </el-input>
            </el-form-item>
            <!-- <el-form-item
              class="poDing"
              prop="email"
              style="margin-right: 20px"
            >
              <el-input
                v-model="ruleForm.email"
                placeholder="确认邮箱"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="ChatRound"
              />
              <div class="inp_yzm" @click="countDown()">
                {{ content }}
              </div>
            </el-form-item> -->
            <el-form-item>
              <el-button
                type=""
                @click="submit(ruleFormRef1)"
                style="
                  width: 155px;
                  height: 40px;
                  background: #9cdce4;
                  color: #fff;
                  margin-bottom: 20px;
                "
              >
                确定
              </el-button>
              <el-button
                plain
                @click="resetForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  margin-left: 40px;
                  margin-bottom: 20px;
                "
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!-- 绑定手机号 -->
      <div class="dialog">
        <el-dialog
          v-model="dialogVisible2"
          :width="400"
          :height="640"
          center
          align-center
          style="border-radius: 7px"
        >
          <template #header>
            <div class="tac mb20" style="font-size: 20px; font-weight: bold">
              更换手机号
            </div>
          </template>

          <!-- 表单 -->
          <el-form
            ref="ruleFormRef2"
            :model="ruleForm"
            :size="formSize"
            status-icon
            style="margin-left: 30px"
            :rules="rules"
          >
            <el-form-item class="poDing" prop="tel">
              <el-input
                v-model="ruleForm.tel"
                class="input_shuru"
                placeholder="请输入手机号"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="PhoneFilled"
              >
              </el-input>
            </el-form-item>

            <el-form-item class="poDing" prop="code" style="margin-right: 20px">
              <el-input
                v-model="ruleForm.code"
                placeholder="请输入验证码"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="ChatSquare"
              />
              <div class="inp_yzm" @click="countDown()">
                {{ content }}
              </div>
            </el-form-item>

            <el-form-item class="poDing" prop="new_tel">
              <el-input
                v-model="ruleForm.new_tel"
                class="input_shuru"
                placeholder="请输入新的手机号"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="PhoneFilled"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type=""
                @click="submit1(ruleFormRef2)"
                style="
                  width: 155px;
                  height: 40px;
                  background: #9cdce4;
                  color: #fff;
                  margin-bottom: 20px;
                "
              >
                确定
              </el-button>
              <el-button
                plain
                @click="resetForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  margin-left: 40px;
                  margin-bottom: 20px;
                "
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import "../../assets/com/com.scss";
import { ElMessage } from "element-plus";
import {
  changeUsername,
  setEmail,
  changeEmail,
  getCodeByTel,
  changeTel,
} from "../../Api/login/login";

const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);
import type { FormInstance } from "element-plus";
// icon
import {
  Message,
  ChatSquare,
  User,
  PhoneFilled,
} from "@element-plus/icons-vue";
import { useCounterStore } from "../../pain/login/login";

const formSize = ref("default");

const ruleForm = reactive({
  username: "", //用户名
  email: "", //邮箱
  tel: "", //手机号
  new_tel: "", //新手机号
  code: "", //验证码
  clientid: "", //用户id
});

// 验证
const ruleFormRef = ref();
const ruleFormRef1 = ref();
const ruleFormRef2 = ref();
const rules = reactive({
  email: [
    { required: true, message: "请填写邮箱地址", trigger: "blur" },
    {
      pattern: /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/,
      message: "验证码格式不正确",
      trigger: "blur",
    },
  ],
  code: [{ required: true, message: "请填写验证码", trigger: "blur" }],
  tel: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
  new_tel: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
});

const aa = JSON.parse(localStorage.getItem("token") || "0");
const clientid = aa.clientid;
const email = aa.email;

// 用户名  下一步
const submitForm = () => {
  changeUsername({ username: ruleForm.username, clientid }).then((res) => {
    console.log(res);
    dialogVisible.value = false;
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  });
};

// 更换手机号
const submit1 = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      changeTel({
        tel: ruleForm.tel,
        new_tel: ruleForm.new_tel,
        code: ruleForm.code,
        clientid,
      }).then((res) => {
        if (res.data.code !== 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 关闭弹框
          dialogVisible2.value = false;
          // 清空表单
          ruleFormRef2.value.resetFields();
          // 存 token
          localStorage.setItem("token", JSON.stringify(ruleForm));
        }
        console.log(res);
      });
    }
  });
};

// 邮箱 确定按钮
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (email == "") {
        // 初次设置邮箱
        setEmail({ email: ruleForm.email, clientid }).then((res) => {
          console.log(res);
          if (res.data.code !== 1) {
            ElMessage.error(res.data.msg);
          } else {
            ElMessage({
              message: res.data.msg,
              type: "success",
            });
          }
          // 关闭弹窗
          dialogVisible1.value = false;
        });
      } else {
        // 设置邮箱
        changeEmail({ email: ruleForm.email, clientid }).then((res) => {
          console.log(res);
          if (res.data.code !== 1) {
            ElMessage.error(res.data.msg);
          } else {
            ElMessage({
              message: res.data.msg,
              type: "success",
            });
          }

          // 关闭弹窗
          dialogVisible1.value = false;
        });
      }
    }
  });
};

// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 获取验证码
const content = ref("获取验证码"); // 按钮里显示的内容
const totalTime = ref(60); //记录具体倒计时时间
const canClick = ref(true);
const countDown = () => {
  getCodeByTel({ tel: ruleForm.tel }).then((res) => {
    console.log(res);
    ruleFormRef.value.resetFields();
  });
  if (!canClick.value) return;
  canClick.value = false;
  content.value = totalTime.value + "s后重新发送";
  let clock = window.setInterval(() => {
    totalTime.value--;
    content.value = totalTime.value + "s后重新发送";
    if (totalTime.value < 0) {
      window.clearInterval(clock);
      content.value = "重新获取验证码";
      totalTime.value = 60;
      canClick.value = true;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.content {
  // width: 100.625rem;
  // height: 58.75rem;、
  height: calc(100vh - 150px);

  background: #ffffff;
  .info {
    width: 17.5rem;
    height: 8.875rem;
    margin: 3.125rem 0 0 3.125rem;
    font-size: 14px;
    .df {
      justify-content: space-between;
      align-items: center;
    }
  }
  .h3 {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
  }
}

// 验证码
.poDing {
  position: relative;
}
.inp_yzm {
  color: #5ac4d3;
  position: absolute;
  right: 25px;
  top: 5px;
  cursor: pointer;
}
</style>
